<template>
  <el-tabs type="border-card" class="content-tabs">
    <el-tab-pane label="会议室预定">
      <el-card class="content-card">
        <template #header>
          <div class="card-header">
            <span>会议室预定</span>
          </div>
        </template>

        <div class="search-form">
          <span>房间名：</span>
          <el-input v-model="selectValue.roomName" placeholder="请输入房间名"></el-input>
          <span>房间面积(平米)：</span>
          <el-input v-model.number="selectValue.roomSquare" placeholder="请输入房间面积"></el-input>
          <span>房间容量(座)：</span>
          <el-input v-model.number="selectValue.roomCapacity" placeholder="请输入房间容量"></el-input>

          <el-checkbox v-model="selectValue.roomProjector" label="投影仪"></el-checkbox>
          <el-checkbox v-model="selectValue.roomAudio" label="音响"></el-checkbox>
          <el-checkbox v-model="selectValue.roomNetwork" label="网络"></el-checkbox>

          <span>房间类型：</span>
          <el-select v-model="selectValue.roomType" placeholder="全部(空)">
            <el-option
            v-for="item in option0"
            :key="item.id"
            :label="item.label"
            :value="item.value"
            />
          </el-select>
          <span>房间状态：</span>
          <el-select v-model="selectValue.roomStatus" placeholder="全部(空)">
            <el-option
            v-for="item in option1"
            :key="item.id"
            :label="item.label"
            :value="item.value"
            />
          </el-select>
          <span>价格(元/小时)：</span>
          <el-input v-model.number="selectValue.roomPrice" placeholder="请输入房间价格"></el-input>
          <el-button type="primary" @click="fetchRoomList()">搜索</el-button>   
        </div>

        <div class="content-box">
          <el-table
            :data="roomList"
            style="width: 100%; margin-top: 20px"
            stripe
            row-key="roomId"
          >
            <el-table-column
              type="index"
              width="80"
            />
            <el-table-column
              prop="roomName"
              label="房间名"
              show-overflow-tooltip
            />
            <el-table-column
              prop="roomType"
              label="类型"
            />            
            <el-table-column
              prop="roomSquare"
              label="面积/平米"
              width="160"
            />
            <el-table-column
              prop="roomCapacity"
              label="容量/座"
              width="160"
            />
            <el-table-column
              prop="roomPrice"
              label="价格(元/小时)"
              width="160"
            />
            <el-table-column
              prop="roomProjector"
              label="投影设备"
              :formatter="formatBoolean"
              width="80"
            />
            <el-table-column
              prop="roomAudio"
              label="音响"
              :formatter="formatBoolean"
              width="80"
            />
            <el-table-column
              prop="roomNetwork"
              label="网络"
              :formatter="formatBoolean"
              width="80"
            />
            <el-table-column
              prop="roomStatus"
              label="状态"
              width="80"
            />
            <el-table-column label="操作" width="160">
              <template #default="scope">
                <el-button
                  type="warning"
                  size="small"
                  v-if="scope.row.roomStatus!='锁定'"
                  @click="openDialog(scope.row)"
                >
                  预订
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            :total="total"
            current-page="currentPage"
            :page-size="8"
            :pager-count="8"
            layout="total, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            class="pagination-container"
          />
        </div>
      </el-card>
    </el-tab-pane>
    <el-dialog 
      v-model="isDialog"
      title="预定时间"
      align-center
      width="800px"
      :close-on-click-modal="false"
      :before-close="closeDialog"
    >
      <template #default>
        <div class="Time_box">
          <div class="Time_header">
            <el-scrollbar ref="scrollbarRef" @wheel.prevent="handleScroll">
              <div class="Time_scroll">
                <p v-for="item,index in TimeList" :key="item.YMD" :class="{Select_date:DateIndex!=index,Select_active:DateIndex==index}" @click="clickDate(index)">{{item.YMD}}</p>
              </div>
            </el-scrollbar>
          </div>
          <div class="Time_legend">
            <div class="Time_legend_box"><div class="Time_legend_color" style="background-color: #C8C9CC;"></div><span>不可选中</span></div>
            <div class="Time_legend_box"><div class="Time_legend_color" style="background-color: #ffa4a4;"></div><span>已有预订</span></div>
            <div class="Time_legend_box"><div class="Time_legend_color" style="background-color: #3EA7F1;"></div><span>当前预定</span></div>
          </div>
          <div class="Time_container">
            <span class="Select_time"></span>
            <span v-for="item,index in TimeList[DateIndex].HMS" :key="index" :class="{Select_time:true,Select0:item==0,Select1:item==1,Select2:item==2,Select3:item==3}" @click="clickTime(item,index)">{{Stime(index)}}~{{Etime(index)}}</span>   
          </div>
          <div class="Time_footer">
            <div class="Time_footer_left">
              <span>开始时间：{{StartTime}}</span>
              <span>结束时间：{{EndTime}}</span>
            </div>
            <span>预订花费：{{Cost}} 元</span>
          </div>
        </div>
      </template>
      <template #footer>
          <div class="dialog-footer">
              <el-button class="cancel-btn" @click="closeDialog()">取消预定</el-button>
              <el-button class="submit-btn" type="primary" @click="submitDialog()">
                提交预定
              </el-button>
          </div>
      </template>
    </el-dialog>
  </el-tabs>
</template>

<script setup>
  import { ElMessage,ElMessageBox } from 'element-plus'
  import { ref,reactive,computed,onMounted } from 'vue'
  import {
    GetRoomArrayServer,
    BookRoomServer,
    TimeServer,
  }from '@/api/instance'

  onMounted(()=>{
    fetchRoomList();
  })
  const selectValue = reactive({
    roomName:"",
    roomType:"",
    roomSquare:null,
    roomCapacity:null,
    roomProjector:false,
    roomAudio:false,
    roomNetwork:false,
    roomPrice:null,
    roomStatus:'',
  })
  const option0=[
    { id:0 , value: '' ,label: '全部(空)' },
    { id:1 , value: '教室型' , label: '教室型' },
    { id:2 , value: '圆桌型' , label: '圆桌型' },
  ]
  const option1=[
    { id:0 , value: '' ,label: '全部(空)' },
    { id:1 , value: '维护' , label: '维护' },
    { id:2 , value: '使用' , label: '使用' },
    { id:3 , value: '预定' , label: '预定' },
    { id:4 , value: '空闲' , label: '空闲' },
  ]
  const roomList=reactive([
  ])
  const formatBoolean = (row, column, cellValue) =>{
    var ret = ''  //你想在页面展示的值
    if (cellValue) {
        ret = "支持"  //根据自己的需求设定
    } else {
        ret = "不支持"
    }
    return ret
  }
  const scrollbarRef = ref(null)
  const handleScroll= (e) => {
	  const wheelDelta = e.wheelDelta || -e.deltaY * 100
	  scrollbarRef.value.setScrollLeft(scrollbarRef.value.wrapRef.scrollLeft - wheelDelta)
	}
  const currentPage = ref(1)
  const total=ref(0)
  const fetchRoomList=async (page=1) => {
    currentPage.value=page;
    if (typeof selectValue.roomSquare !== 'number' && selectValue.roomSquare !== null && selectValue.roomSquare !== '') {
      ElMessage.error('房间面积输入格式不对')
      return
    }
    if (typeof selectValue.roomCapacity !== 'number' && selectValue.roomCapacity !== null && selectValue.roomCapacity !== '') {
      ElMessage.error('房间容量输入格式不对')
      return
    }
    if (typeof selectValue.roomPrice !== 'number' && selectValue.roomPrice !== null && selectValue.roomPrice !== '') {
      ElMessage.error('房间价格输入格式不对')
      return
    }
    try{
      const res = await GetRoomArrayServer({
        roomName:selectValue.roomName,
        roomType:selectValue.roomType,
        roomSquare:selectValue.roomSquare,
        roomCapacity:selectValue.roomCapacity,
        roomProjector:selectValue.roomProjector,
        roomAudio:selectValue.roomAudio,
        roomNetwork:selectValue.roomNetwork,
        roomPrice:selectValue.roomPrice,
        roomStatus:selectValue.roomStatus,
      });
      if(res.code===0){
        const allData=res.data||[];
        total.value=allData.length;
        const start=(page-1)*8;
        const end=start+8;
        roomList.splice(0,roomList.length,...allData.slice(start,end));
      }else{
        ElMessage.error(res.message || '获取会议室列表失败')  
      }
    }catch(error){
      ElMessage.error(error.message || '网络请求失败1')
    }
  }
  const isDialog=ref(false);
  const TimeList = reactive([
        {
            "YMD": "2024-07-30",
            "HMS": [
                2,
                1,
                0,
                0,
                1,
                2,
                0,
                2,
                0,
                2,
                1,
                2,
                2
            ]
        },
        {
            "YMD": "2024-08-03",
            "HMS": [
                2,
                2,
                0,
                0,
                1,
                0,
                2,
                1,
                0,
                0,
                1,
                1,
                1
            ]
        },
        {
            "YMD": "2025-02-07",
            "HMS": [
                0,
                0,
                2,
                1,
                0,
                0,
                2,
                0,
                0,
                1,
                2,
                1,
                1
            ]
        },
        {
            "YMD": "2025-10-13",
            "HMS": [
                1,
                1,
                1,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                2,
                2,
                0
            ]
        },
        {
            "YMD": "2025-04-15",
            "HMS": [
                2,
                1,
                0,
                1,
                1,
                0,
                0,
                0,
                2,
                1,
                1,
                1,
                2
            ]
        },
        {
            "YMD": "2024-12-11",
            "HMS": [
                2,
                0,
                2,
                2,
                0,
                0,
                2,
                0,
                1,
                2,
                2,
                0,
                0
            ]
        },
        {
            "YMD": "2024-10-18",
            "HMS": [
                1,
                0,
                0,
                1,
                0,
                2,
                1,
                1,
                2,
                0,
                1,
                1,
                2
            ]
        },
        {
            "YMD": "2024-11-29",
            "HMS": [
                2,
                1,
                2,
                1,
                0,
                1,
                1,
                0,
                2,
                1,
                2,
                1,
                0
            ]
        },
        {
            "YMD": "2026-04-15",
            "HMS": [
                2,
                1,
                1,
                0,
                1,
                2,
                0,
                1,
                0,
                1,
                1,
                2,
                2
            ]
        },
        {
            "YMD": "2025-11-12",
            "HMS": [
                1,
                2,
                1,
                0,
                1,
                0,
                0,
                0,
                2,
                1,
                1,
                1,
                2
            ]
        },
        {
            "YMD": "2024-08-28",
            "HMS": [
                2,
                0,
                1,
                0,
                2,
                2,
                0,
                0,
                0,
                2,
                0,
                1,
                0
            ]
        },
        {
            "YMD": "2024-07-27",
            "HMS": [
                2,
                1,
                0,
                2,
                1,
                0,
                2,
                0,
                2,
                2,
                1,
                0,
                2
            ]
        },
        {
            "YMD": "2024-10-25",
            "HMS": [
                2,
                2,
                2,
                0,
                0,
                1,
                1,
                2,
                0,
                1,
                2,
                0,
                2
            ]
        },
        {
            "YMD": "2025-07-31",
            "HMS": [
                0,
                2,
                2,
                1,
                2,
                0,
                0,
                1,
                1,
                0,
                1,
                2,
                0
            ]
        },
        {
            "YMD": "2024-05-30",
            "HMS": [
                1,
                0,
                0,
                2,
                2,
                0,
                2,
                1,
                0,
                2,
                1,
                0,
                1
            ]
        },
        {
            "YMD": "2025-07-01",
            "HMS": [
                1,
                2,
                1,
                2,
                0,
                1,
                0,
                2,
                1,
                0,
                1,
                0,
                2
            ]
        },
        {
            "YMD": "2025-05-18",
            "HMS": [
                2,
                1,
                0,
                0,
                2,
                2,
                0,
                0,
                0,
                0,
                1,
                1,
                2
            ]
        },
        {
            "YMD": "2025-02-14",
            "HMS": [
                0,
                1,
                1,
                0,
                1,
                1,
                2,
                0,
                2,
                1,
                1,
                1,
                2
            ]
        },
        {
            "YMD": "2024-07-23",
            "HMS": [
                2,
                0,
                2,
                2,
                0,
                2,
                0,
                1,
                0,
                2,
                1,
                1,
                2
            ]
        },
        {
            "YMD": "2026-02-04",
            "HMS": [
                2,
                2,
                2,
                1,
                1,
                1,
                2,
                2,
                2,
                0,
                1,
                2,
                0
            ]
        },
        {
            "YMD": "2025-01-04",
            "HMS": [
                1,
                1,
                0,
                2,
                1,
                2,
                1,
                0,
                1,
                0,
                2,
                1,
                1
            ]
        },
        {
            "YMD": "2024-05-25",
            "HMS": [
                2,
                2,
                1,
                0,
                0,
                2,
                2,
                0,
                1,
                2,
                2,
                2,
                2
            ]
        },
        {
            "YMD": "2025-05-12",
            "HMS": [
                0,
                2,
                2,
                0,
                0,
                1,
                2,
                1,
                1,
                2,
                1,
                0,
                1
            ]
        },
        {
            "YMD": "2026-02-26",
            "HMS": [
                1,
                1,
                1,
                1,
                0,
                1,
                1,
                0,
                2,
                2,
                0,
                1,
                0
            ]
        },
        {
            "YMD": "2025-08-21",
            "HMS": [
                0,
                2,
                1,
                2,
                2,
                2,
                2,
                1,
                0,
                0,
                1,
                1,
                2
            ]
        },
        {
            "YMD": "2024-12-03",
            "HMS": [
                0,
                1,
                0,
                1,
                1,
                1,
                2,
                0,
                2,
                2,
                1,
                2,
                0
            ]
        },
        {
            "YMD": "2025-11-05",
            "HMS": [
                0,
                1,
                1,
                1,
                1,
                0,
                0,
                1,
                2,
                2,
                2,
                0,
                0
            ]
        },
        {
            "YMD": "2025-06-08",
            "HMS": [
                0,
                1,
                0,
                2,
                2,
                1,
                0,
                1,
                1,
                0,
                1,
                2,
                2
            ]
        },
        {
            "YMD": "2024-11-04",
            "HMS": [
                1,
                0,
                2,
                2,
                2,
                2,
                1,
                0,
                2,
                0,
                2,
                1,
                2
            ]
        },
        {
            "YMD": "2025-03-09",
            "HMS": [
                0,
                0,
                2,
                0,
                0,
                1,
                1,
                0,
                2,
                1,
                1,
                0,
                1
            ]
        },
        {
            "YMD": "2024-11-29",
            "HMS": [
                1,
                2,
                2,
                0,
                0,
                0,
                1,
                1,
                1,
                1,
                1,
                0,
                0
            ]
        },
        {
            "YMD": "2025-01-30",
            "HMS": [
                2,
                0,
                0,
                0,
                2,
                0,
                0,
                1,
                2,
                1,
                0,
                2,
                0
            ]
        },
        {
            "YMD": "2025-12-07",
            "HMS": [
                2,
                2,
                2,
                2,
                1,
                2,
                0,
                1,
                2,
                0,
                2,
                1,
                2
            ]
        },
        {
            "YMD": "2026-03-23",
            "HMS": [
                0,
                2,
                1,
                0,
                1,
                0,
                2,
                1,
                1,
                1,
                2,
                1,
                0
            ]
        },
        {
            "YMD": "2024-11-01",
            "HMS": [
                1,
                2,
                0,
                0,
                1,
                2,
                1,
                0,
                0,
                2,
                2,
                2,
                1
            ]
        },
        {
            "YMD": "2025-01-01",
            "HMS": [
                2,
                0,
                0,
                0,
                2,
                2,
                1,
                1,
                1,
                2,
                2,
                0,
                0
            ]
        },
        {
            "YMD": "2024-10-25",
            "HMS": [
                2,
                0,
                1,
                1,
                2,
                1,
                0,
                0,
                1,
                0,
                0,
                2,
                0
            ]
        },
        {
            "YMD": "2025-04-08",
            "HMS": [
                0,
                2,
                1,
                0,
                2,
                1,
                1,
                2,
                1,
                1,
                0,
                2,
                1
            ]
        },
        {
            "YMD": "2025-03-10",
            "HMS": [
                0,
                2,
                0,
                2,
                2,
                2,
                0,
                2,
                2,
                1,
                2,
                2,
                1
            ]
        },
        {
            "YMD": "2024-07-12",
            "HMS": [
                2,
                1,
                1,
                1,
                2,
                1,
                2,
                1,
                0,
                1,
                2,
                0,
                1
            ]
        },
        {
            "YMD": "2025-01-08",
            "HMS": [
                0,
                2,
                2,
                0,
                0,
                1,
                0,
                2,
                0,
                0,
                0,
                2,
                0
            ]
        },
        {
            "YMD": "2026-01-02",
            "HMS": [
                0,
                0,
                1,
                2,
                2,
                0,
                2,
                1,
                1,
                1,
                0,
                0,
                1
            ]
        },
        {
            "YMD": "2026-01-22",
            "HMS": [
                1,
                1,
                1,
                2,
                2,
                1,
                1,
                0,
                2,
                2,
                0,
                2,
                0
            ]
        },
        {
            "YMD": "2024-11-23",
            "HMS": [
                2,
                0,
                2,
                1,
                2,
                1,
                0,
                0,
                2,
                1,
                1,
                1,
                2
            ]
        },
        {
            "YMD": "2024-08-06",
            "HMS": [
                1,
                0,
                1,
                1,
                0,
                0,
                2,
                0,
                0,
                1,
                0,
                2,
                0
            ]
        },
        {
            "YMD": "2025-07-24",
            "HMS": [
                1,
                2,
                0,
                2,
                0,
                0,
                0,
                0,
                2,
                1,
                1,
                2,
                0
            ]
        },
        {
            "YMD": "2024-12-20",
            "HMS": [
                2,
                0,
                2,
                0,
                2,
                1,
                2,
                0,
                1,
                0,
                2,
                0,
                0
            ]
        },
        {
            "YMD": "2025-09-25",
            "HMS": [
                2,
                2,
                1,
                1,
                1,
                2,
                2,
                2,
                1,
                2,
                2,
                2,
                2
            ]
        },
        {
            "YMD": "2025-11-04",
            "HMS": [
                0,
                0,
                1,
                1,
                1,
                1,
                1,
                2,
                2,
                0,
                0,
                2,
                0
            ]
        },
        {
            "YMD": "2025-03-26",
            "HMS": [
                1,
                2,
                1,
                0,
                0,
                1,
                0,
                1,
                0,
                0,
                2,
                1,
                1
            ]
        },
        {
            "YMD": "2024-05-28",
            "HMS": [
                0,
                1,
                1,
                0,
                1,
                0,
                1,
                1,
                1,
                2,
                2,
                1,
                0
            ]
        },
        {
            "YMD": "2025-10-23",
            "HMS": [
                0,
                1,
                1,
                1,
                0,
                1,
                2,
                1,
                0,
                2,
                2,
                0,
                2
            ]
        },
        {
            "YMD": "2025-11-06",
            "HMS": [
                0,
                1,
                0,
                0,
                2,
                1,
                0,
                1,
                0,
                1,
                1,
                0,
                2
            ]
        },
        {
            "YMD": "2024-07-16",
            "HMS": [
                1,
                2,
                2,
                1,
                0,
                2,
                1,
                1,
                1,
                2,
                0,
                2,
                1
            ]
        },
        {
            "YMD": "2025-05-07",
            "HMS": [
                0,
                2,
                1,
                0,
                0,
                1,
                0,
                0,
                0,
                0,
                2,
                2,
                1
            ]
        },
        {
            "YMD": "2025-12-29",
            "HMS": [
                1,
                2,
                0,
                2,
                1,
                1,
                1,
                2,
                2,
                0,
                1,
                0,
                2
            ]
        },
        {
            "YMD": "2026-03-27",
            "HMS": [
                1,
                1,
                0,
                1,
                1,
                0,
                0,
                0,
                1,
                0,
                0,
                2,
                1
            ]
        },
        {
            "YMD": "2024-05-22",
            "HMS": [
                0,
                1,
                0,
                0,
                1,
                1,
                0,
                1,
                2,
                0,
                0,
                1,
                2
            ]
        },
        {
            "YMD": "2024-07-30",
            "HMS": [
                1,
                1,
                2,
                0,
                2,
                2,
                2,
                0,
                0,
                2,
                1,
                1,
                1
            ]
        },
        {
            "YMD": "2025-06-11",
            "HMS": [
                1,
                1,
                0,
                2,
                1,
                1,
                2,
                0,
                1,
                2,
                0,
                2,
                2
            ]
        }
    ])//时间数组，用于在表单中渲染出内容
  //计算属性，开始时间和结束时间
  const StartTime = computed(() => {
    if(FirstTime.value==null&&SecondTime.value==null){
      return "";
    }else if(FirstTime.value==null&&SecondTime.value!=null){
      return TimeList[DateIndex.value].YMD+' '+Stime(SecondTime.value)+':00';
    }else if(FirstTime.value!=null&&SecondTime.value==null){
      return TimeList[DateIndex.value].YMD+' '+Stime(FirstTime.value)+':00';
    }else{
      const min = Math.min(FirstTime.value, SecondTime.value);
      return TimeList[DateIndex.value].YMD+' '+Stime(min)+':00';
    }
  });//越早的选中时间就是开始时间，不管点击先后
  const EndTime = computed(() => {
    if(FirstTime.value==null&&SecondTime.value==null){
      return "";
    }else if(FirstTime.value==null&&SecondTime.value!=null){
      return TimeList[DateIndex.value].YMD+' '+Etime(SecondTime.value)+':00';
    }else if(FirstTime.value!=null&&SecondTime.value==null){
      return TimeList[DateIndex.value].YMD+' '+Etime(FirstTime.value)+':00';
    }else{
      const max = Math.max(FirstTime.value, SecondTime.value);
      return TimeList[DateIndex.value].YMD+' '+Etime(max)+':00';
    }
  });//越晚的选中时间就是结束时间，不管点击先后
  //计算属性，获取实时花费
  const roomP = ref(0);
  const roomTempId = ref(0);//记录打开的房间id
  const Cost = computed(() => {
    if (FirstTime.value === null && SecondTime.value === null) return 0;
    if (FirstTime.value === null || SecondTime.value === null) return roomP.value;
    const duration = Math.abs(SecondTime.value - FirstTime.value) + 1;
    return duration * roomP.value; // roomPrice 是房间价格
  });
  const DateIndex=ref(0);//日期索引,默认今天
  const FirstTime=ref(null);//首次选中块
  const SecondTime=ref(null);//第二选中块
  //拒绝跨不同种类的块选中
  
  //打开对话框，获取时间表单
  const openDialog=async(row)=>{
    try{
      const res=await TimeServer({
        roomId:row.roomId
      });
      if(res.code===0){
        TimeList.splice(0,TimeList.length,...res.data);//数组结构赋值
        roomTempId.value=row.roomId
        roomP.value=row.roomPrice
        isDialog.value=true;
      }else{
        ElMessage.error(res.message || '获取预订表单失败')
      }
    }catch(error){
      ElMessage.error(error.message || '网络请求失败2')
    }
    // roomP.value=row.roomPrice
    // isDialog.value=true;
  }
  const clickDate = (index) => {
    DateIndex.value=index;
    //清空之前的时间选择,因为不跨日选择
    FirstTime.value=null;
    SecondTime.value=null;
  }
  const clickTime = (item,index) => {
    // console.log("hello "+index+" "+item+" "+FirstTime.value+" "+SecondTime.value);
    if(item==1||item==2){
      return ;
    }else if(item==0){
      if(FirstTime.value==null){
        FirstTime.value=index;
        TimeList[DateIndex.value].HMS[index]=3;//选中
      }else{
        if(SecondTime.value==null){
          // SecondTime.value=index;//第二次选择,需要判定中间的块情况，允许拒绝
          let flag=true;//没有不可选中的块
          let BTime=FirstTime.value<index?FirstTime.value:index;
          let ATime=FirstTime.value<index?index:FirstTime.value;
          for(let i=BTime;i<=ATime;i++){
            if(TimeList[DateIndex.value].HMS[i]==1||TimeList[DateIndex.value].HMS[i]==2){
              flag=false;
            }
          }
          if(flag==false){
            ElMessage.error('存在 不能选中 或 已被选中 的时间')
          }else{
            for(let j=BTime;j<=ATime;j++){
              if(TimeList[DateIndex.value].HMS[j]==0){
                TimeList[DateIndex.value].HMS[j]=3;//区间选中
              }//其他块不动，观察是否有误
            }
            SecondTime.value=index;
            TimeList[DateIndex.value].HMS[index]=3;//选中
          }
        }else{
          let flag=true;//没有不可选中的块
          let BTime=FirstTime.value<SecondTime.value?FirstTime.value:SecondTime.value;
          let ATime=FirstTime.value<SecondTime.value?SecondTime.value:FirstTime.value;
          if(index<BTime){
            for(let i=index;i<=BTime;i++){
              if(TimeList[DateIndex.value].HMS[i]==1||TimeList[DateIndex.value].HMS[i]==2){
                flag=false;
              }
            }
            if(flag==false){
              ElMessage.error('存在 不能选中 或 已被选中 的时间')
            }else{
              for(let k=index;k<=BTime;k++){
                if(TimeList[DateIndex.value].HMS[k]==0){
                  TimeList[DateIndex.value].HMS[k]=3;//区间选中
                }//其他块不动，观察是否有误
              }
              TimeList[DateIndex.value].HMS[index]=3;//选中
              FirstTime.value=ATime;//更新第一个块为最远的那个
              SecondTime.value=index;
            }
          }else if(index>ATime){
            for(let i=ATime;i<=index;i++){
              if(TimeList[DateIndex.value].HMS[i]==1||TimeList[DateIndex.value].HMS[i]==2){
                flag=false;
              }
            }
            if(flag==false){
              ElMessage.error('存在 不能选中 或 已被选中 的时间')
            }else{
              for(let k=ATime;k<=index;k++){
                if(TimeList[DateIndex.value].HMS[k]==0){
                  TimeList[DateIndex.value].HMS[k]=3;//区间选中
                }//其他块不动，观察是否有误
              }
              TimeList[DateIndex.value].HMS[index]=3;//选中
              FirstTime.value=BTime;//更新第一个块为最远的那个
              SecondTime.value=index;
            }
          }
          // else{
          //   TimeList[DateIndex.value].HMS[index]=3;//多余
          // }
        }
      }
    }else{
      if(FirstTime.value==index||SecondTime.value==index){
        if(FirstTime.value==index){
          if(index+1<13&&TimeList[DateIndex.value].HMS[index+1]==3){
            FirstTime.value=index+1;
          }else if(index-1>=0&&TimeList[DateIndex.value].HMS[index-1]==3){
            FirstTime.value=index-1;//这个最多只有一个是有颜色的
          }else{
            FirstTime.value=null;//这里需要找到最近的有颜色的块变为F，没有就为null
          }
          TimeList[DateIndex.value].HMS[index]=0;//取消选中
        }
        if(SecondTime.value==index){
          if(index+1<13&&TimeList[DateIndex.value].HMS[index+1]==3){
            SecondTime.value=index+1;
          }else if(index-1>=0&&TimeList[DateIndex.value].HMS[index-1]==3){
            SecondTime.value=index-1;//这个最多只有一个是有颜色的
          }else{
            SecondTime.value=null;//这里需要找到最近的有颜色的块变为S，没有就为null
          }
          TimeList[DateIndex.value].HMS[index]=0;//取消选中
        }
      }else{
        if(index>FirstTime.value){
          for(let i=index;i<=SecondTime.value;i++){
            if(TimeList[DateIndex.value].HMS[i]==3){
              TimeList[DateIndex.value].HMS[i]=0;//区间取消
            }
          }
          SecondTime.value=index-1;//感觉这个逻辑不靠谱
        }else{
          TimeList[DateIndex.value].HMS[index]=0;//取消选中
        }
        if(index<FirstTime.value){
          for(let i=SecondTime.value;i<=index;i++){
            if(TimeList[DateIndex.value].HMS[i]==3){
              TimeList[DateIndex.value].HMS[i]=0;//区间取消
            }
          }
          SecondTime.value=index+1;//感觉这个逻辑不靠谱
        }else{
          TimeList[DateIndex.value].HMS[index]=0;//取消选中
        }
      }
    }
  }
  const Stime = (index) => {
    const baseTime = new Date();
    baseTime.setHours(8+index, 0, 0);
    return formatTime0(baseTime);
  }
  const Etime = (index) => {
    const baseTime = new Date();
    baseTime.setHours(9+index, 0, 0);
    return formatTime0(baseTime);
  }
  const formatTime0 = (date) => {
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    return `${hours}:${minutes}`;
  }
  //计算出start和end
  const submitDialog=async (row)=>{
    try{
      const res=await BookRoomServer({
        roomId:roomTempId.value,
        reserveStart:StartTime.value,
        reserveEnd:EndTime.value,
        reserveCost:Cost.value
      })
      if(res.code===0){
        ElMessage.success('预约成功')
        roomTempId.value=0
        roomP.value=0;
        isDialog.value=false;
        fetchRoomList();
      }else{
        ElMessage.error(res.message || '预约失败')
      }
    }catch(error){
      ElMessage.error(error.message || '网络请求失败3')
    }
  }
  //直接关闭对话框
  const closeDialog=async()=>{
    DateIndex.value=0;
    FirstTime.value=null;
    SecondTime.value=null;
    roomTempId.value=0;
    roomP.value=0;
    isDialog.value=false;
  }

  // 处理每页显示条目数变化
  const handleSizeChange = (pageSize) => {
    // 可以在这里添加逻辑来处理每页显示条目数的变化
      console.log(`每页显示条目数变为: ${pageSize}`);
  };
  // 处理已创建社团分页变化
  const handlePageChange = (newPage) => {
      fetchRoomList(newPage);
  };
</script>

<style lang="scss" scoped>
  .content-tabs{
    height: 95%;
    width: 95%;
    margin: 15px auto;//原来为20px，现在为15px
    .content-card{
      height: 95%;
      margin: 20px;
      .card-header{
        font-size: 18px;
        font-weight: bold;
      }
      .search-form{
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;
        :deep(.el-select){
          width: 200px;
          margin-right: 20px;
        }
        :deep(.el-input){
          width: 200px;
          margin-right: 20px;
        }
        :deep(.el-checkbox){
          margin-right: 20px;
          .el-checkbox__label{
            font-size: 16px;
          }
        }
      }
      .content-box{
        .pagination-container{
          display: flex;
          justify-content: center;
          margin-top: 30px
        }
      }
    }
  }
  .el-tab-pane {
    height:100%;
  }
  .el-form {
    padding: 5px;
  }
  .el-form-item {
    margin-bottom: 25px; /* 原默认值为 25px，可调大数值 */
    margin-right: 35%;
  }
  :deep(.el-dialog__header){
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 20px;
  }
  .Time_box{
    .Time_header{
      width:100%;
      height:85px;
      overflow-x:hidden;
      border-bottom: 1px solid #ebebeb;
      .Time_scroll{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-content: center;
        flex-wrap: nowrap;
        width: fit-content;
        .Select_date,.Select_active{
          border:1px solid #AAA;
          border-radius: 5px;
          width:100px;
          height: 40px;
          margin: 10px;
          padding:5px 10px;
          text-align:center;
          font-size:16px;
          line-height: 40px;
        }
        .Select_active{
          border-color:#02A7F0;
          color: #02A7F0;
        }
      }
    }
    .Time_legend{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding:10px 20px;
      font-size:16px;
      line-height: 16px;
      margin:10px 0px 20px;
      .Time_legend_box{
        display: flex;
        flex-direction: row;
        align-items: center;
        .Time_legend_color{
          width: 32px;
          height: 16px;
          margin-right: 10px;
        }
      }
    }
    .Time_container{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: center;
      gap: 20px;
      box-sizing: border-box;
      padding:0px 40px 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ebebeb;
      .Select_time{
        width:100px;
        height:40px;
        padding:0px 10px;
        border-radius: 5px;
        font-size:16px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
      }
      .Select0{
        color:rgb(60, 62, 66);
        border: 1px solid #AAA;
      }
      .Select1{
        color:rgb(255, 255, 255);
        background-color: #C8C9CC;
        border: 1px solid #C8C9CC;
      }
      .Select2{
        color:rgb(255, 255, 255);
        background-color: #ffa4a4;
        border:1px solid #ffa4a4;
      }
      .Select3{
        color:rgb(255, 255, 255);
        background-color: #3EA7F1;
        border:1px solid #3EA7F1;  
      }
    }
    .Time_footer{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding:0px 20px;
      font-size:16px;
      line-height: 16px;
      margin: 10px 0px 10px;
      .Time_footer_left{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        font-size:16px;
        line-height: 16px;
        span{
          display: block;
          width:250px;
        }
      }
    }
  }
</style>